<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度登录</title>
    <style>
        .paa-from-login
        {
            background:url("loginlogo.png")no-repeat left;
           font-sixe:16px;
           height:32px;
            line-height:46px;
            padding-left:118px;
            color: #000000;/*字体颜色*/
            margin-top:1px;
            margin-bottom:15px;
        }
        .p-input
        {
            position:relative;
            display:block;
            line-height:30px;
            padding:5px;
            border:1px;
            font-size:14px;
            color:#000;
            width:305px;
        }
        #u {
            display: block;
            height: 40px;
            line-height: 40px;
            width: 300px;
            font-size: 16px;
            font-weight: 800;
            cursor: pointer;
            color: #fff;
            border:0px;
            border-radius:3px;
            background-color:dodgerblue;
            margin-top:10px;
            margin-bottom:10px;
        }
        .footerBar
        {
            color:#2e82ff;
            margin-top:40px;
            height:60px;
            position:relative;
            padding:0 28px;
            background:#f0f6ff;
            line-height:60px;
            display:block;
        }
        #foot_login{
            margin:0;
            padding:10px;
            position:absolute;
            width:120px;
            text-align:left;
            font-size:14px;
            cursor:pointer;
        }
        .qzone{
            margin-right:15px;
            color:#00c;
            text-decoration:underline;
            padding-left:20px;
            cursor:pointer;
            font-size:12px;
            list-size:none;
            background:url("imges/QQ.png")no-repeat;
            width:0;
            height:18px;
            overflow:hidden;
        }

    </style>
</head>
<body>
<form name="Myform" style="position:relative;width:450px;height:420px;margin: 100px auto;border:2px beige solid">
 <div style="margin-left:10%;padding:3%">
    <div style="display:block;">
        <p  class="paa-from-login">用户名密码登录</p>
    </div>
    <!--<p style="padding:0 0 1px;margin-left:10px"></p>-->
     <div  name="login" width="320px" height="300px"  >
         <p class="p-input" id="parent">
             <input name="input1" type="text"  value placeholder="用户名/邮箱/手机" id="username" onblur="islengthy()" onfocus="OnIt()" style="margin-top:5px;height:30px;width:180px">
             <span style="width:60px ;font-size:3px;color:red;" id="login" >
             </span>
             <img id="imag" src="imges/err_small.png">

         </p>
         <p class="p-input">
             <input type="text"  value placeholder="密码"  id="passwd" style="width:180px;height:30px;margin-top:5px">
         </p>
         <div style="padding:5px;margin:3px"></div>
         <input type="checkbox" style="margin-left:3px" >下次自动登录<br/>
         <p style="display:block;">
         <input type="submit" value="登录" id="u">
         <a href="homework_register.html" style="margin-left:1%;font-family:Tahoma;color:rgb(46,130,255);text-decoration:none">忘记密码?</a>
         <a href="问卷调查.html" style="margin-left: 40%;font-family:Tahoma;color:rgb(46,130,255);text-decoration:none">短信验证</a>
         </p>

     </div>
 </div>
    <div class="footerBar">
        <p title="扫码登录" id="foot_login">扫码登录<a class="qzone" title="QQ账号" href="#"></a></p>

        <a>
        </a>
    </div>
    <script>
        //聚焦的标签
        function OnIt(){

                document.getElementById("login").innerHTML="长度需要在6-16之间";

        }

//不聚焦的标签
        function islengthy() {

            var x = document.forms["Myform"]["input1"].value;
            if (x == null || x == "") {
                document.getElementById("login").innerHTML = "输入不能为空！！";
                document.getElementById("imag").src="imges/err_small.png";
            }
            else if (x.length <= 16 && x.length >= 6) {
                document.getElementById("login").innerHTML="";
                var image = document.createElement("img");
                image.src = "imges/ok_small.png";
                var fuqin = document.getElementById("parent");
                var tup=document.getElementById("imag")
                fuqin.replaceChild(image,tup);

            }
            else {
                document.getElementById("login").innerHTML = "长度不符合要求！！";
                document.getElementById("img").src="imges/err_small.png";
            }
        }
    </script>


</form>
</body>
</html>